import { useState } from 'react';
import PropTypes from 'prop-types';
import './SymptomsSelectionPage.css';

const SymptomsSelectionPage = ({ onConfirm, }) => {
  // 症状列表数据
  const [symptoms, setSymptoms] = useState([
    { id: 1, name: '情绪波动', selected: false },
    { id: 2, name: '头痛', selected: true },
    { id: 3, name: '手臂疼痛', selected: false },
    { id: 4, name: '左大腿疼', selected: true },
    { id: 5, name: '焦虑', selected: false },
    { id: 6, name: '无法入睡', selected: false },
    { id: 7, name: '抑郁', selected: false },
    { id: 8, name: '恐惧', selected: false },
    { id: 9, name: '紧张', selected: false },
    { id: 10, name: '易怒', selected: false }
  ]);

  // 用户已选择的表征状态
  const [selectedSymptoms, setSelectedSymptoms] = useState(['很难过', '清晰不高', '无法入睡', '手臂']);

  // 处理症状选择
  const handleSymptomToggle = (id) => {
    // 更新症状列表，切换选中状态
    setSymptoms(symptoms.map(symptom => 
      symptom.id === id ? { ...symptom, selected: !symptom.selected } : symptom
    ));
  };

  // 移除表征状态
  const handleRemoveSymptom = (symptom) => {
    // 从已选择列表中移除
    setSelectedSymptoms(selectedSymptoms.filter(item => item !== symptom));
  };

  // 处理确认按钮点击
  const handleConfirm = () => {
    // 获取所有选中的症状
    const selected = symptoms.filter(symptom => symptom.selected).map(symptom => symptom.name);
    // 调用父组件提供的确认回调函数
    if (onConfirm) onConfirm(selected);
  };
 
  // 处理取消按钮点击
  

  return (
    <div className="symptoms-page-container">
      {/* 页面标题 */}
      <div className="symptoms-page-header">
        <h1>所有心理健康症状</h1>
        <button className="help-button">?</button>
      </div>

      {/* 症状列表 */}
      <div className="symptoms-list">
        {symptoms.map(symptom => (
          <div 
            key={symptom.id} 
            className={`symptom-item ${symptom.selected ? 'selected' : ''}`}
            onClick={() => handleSymptomToggle(symptom.id)}
          >
            <span className="symptom-name">{symptom.name}</span>
            <div className="selection-circle">
              {symptom.selected && <div className="selection-inner"></div>}
            </div>
          </div>
        ))}
      </div>

      {/* 用户表征状态 */}
      <div className="user-symptoms-section">
        <h2>我的表征状态</h2>
        <div className="selected-symptoms">
          {selectedSymptoms.map((symptom, index) => (
            <div key={index} className="selected-symptom-tag">
              {symptom}
              <button 
                className="remove-symptom" 
                onClick={() => handleRemoveSymptom(symptom)}
              >
                ×
              </button>
            </div>
          ))}
        </div>
      </div>

      {/* 按钮区域 */}
      <div className="buttons-container">
        
        <button className="confirm-button" onClick={handleConfirm}>
          确认 <span className="checkmark">✓</span>
        </button>
      </div>
    </div>
  );
};

// 属性验证
SymptomsSelectionPage.propTypes = {
  onConfirm: PropTypes.func, // 确认回调函数
};

export default SymptomsSelectionPage; 